<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>横向雪碧图</title>
  <style>
    .west {
      /* 雪碧图素材   1600  *  180  =》  8个人物  猴子 -1400px 0*/
      width: 200px;
      height: 180px;
      background: url(sprites/west_01_3ca39fe.png) no-repeat 0 0;
      animation: name 1s steps(8,end) infinite;
    }

    @keyframes name{
        0%{background-position: 0 0;}
        100%{background-position: -1600px 0;}
    }

    /* 100% / 8 个    12.5  - */
   /*  @keyframes name {

      0%,
      100% {
        background-position: 0 0;
      }

      12.5% {
        background-position: -200px 0;
      }

      25% {
        background-position: -400px 0;
      }

      37.5% {
        background-position: -600px 0;
      }

      50% {
        background-position: -800px 0;
      }

      62.5% {
        background-position: -1000px 0;
      }

      75% {
        background-position: -1200px 0;
      }

      87.5% {
        background-position: -1400px 0;
      }
    } */
  </style>

</head>

<body>
  <div class="west"></div>
</body>

</html>